<template>
	<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
		class="demo-ruleForm" :size="formSize" status-icon>
		<el-form-item label="客户名称" prop="CustomerName">
			<el-input v-model="ruleForm.CustomerName" />
		</el-form-item>
		<el-form-item label="联络员" prop="Linkman">
			<el-input v-model="ruleForm.Linkman" />
		</el-form-item>
		<el-form-item label="描述" prop="Desc">
			<el-input v-model="ruleForm.Desc" autocomplete="off" />
		</el-form-item>
		<el-form-item label="电话" prop="Tel">
			<el-input v-model="ruleForm.Tel" />
		</el-form-item>
		
		<el-form-item label="客户类型" prop="customerType">
				<DictSelect v-model="ruleForm.CustomerType" type-name="客户类型" style="width: 200px;"/>
		</el-form-item>
	
		<el-form-item label="菜单状态" prop="Status">
			<el-select v-model="ruleForm.Status" placeholder="请选择状态">
				 <el-option value="1" label="正常"></el-option>
				 <el-option value="0" label="异常"></el-option>
			</el-select>
		</el-form-item>	
		
	
		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">
				保存
			</el-button>
			<el-button @click="resetForm(ruleFormRef)">重置</el-button>
		</el-form-item>
	</el-form>
	
	
	
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
	import { ElNotification } from 'element-plus'
	import DictSelect from '../../components/DictSelect.vue'
	import cusapi from '../../api/Customerapi';	
	
	const emit = defineEmits(['onSave'])
	
	interface RuleForm {
		CustomerName: string,
		CustomerType:number|null,
		Linkman: string
		Tel: string
		Desc: string
		Status:number|null
	}
	
	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
	const ruleForm = reactive<RuleForm>({
		CustomerName: '',
		CustomerType:null,
		Linkman: '',
		Tel: '',
		Desc: '',
		Status:null
	})
	
		
	const submitForm = async (formEl: FormInstance | undefined) => {
		if (!formEl) return
		await formEl.validate((valid, fields) => {
			if (valid) {
				cusapi.post(ruleForm).then((res:any) => {
					if (res.code == 1) {
						ElNotification({
							title: 'Success',
							message: '添加成功',
							type: 'success',
							duration: 800,
							onClose: () => {
								emit("onSave", true)
							}
						})
					} else {
						ElNotification({
							title: 'Error',
							message: '失败',
							type: 'error',
							duration: 800,
						})
					}
				}).catch((err:any) => {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'error',
						duration: 800,
					})
				})
			} else {
				console.log('error submit!', fields)
			}
		})
	}
	
	const resetForm = (formEl: FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
	}
</script>

<style>
</style>